<template>
	<view>
		<view class="search-bg">
			<view class="head-bg"></view>
			<view class="head">
				<view class="flex flai fljcsb search">
					<view class="search-box flex flai flex1">
						<image src="../../static/img/search.png" mode="" class="search-icon"></image>
						<input type="text" value="" confirm-type="search" @confirm="searchInput" v-model="searchForm.keyword" class="flex1"
						 placeholder="请输入产品名称" />
						<image src="../../static/img/close01.png" @click="clickInput" v-if="searchForm.keyword.length>0" mode="" class="clear-input"></image>
					</view>
					<view class="more-icon" @click="moreQuery">
						<image src="../../static/img/moreSearch.png" mode="" class="more-search"></image>
					</view>

				</view>
				<div class="hot-box" v-if="searchType==1">
					<view class="hot-title">热门搜索</view>
					<view class="hot-list">
						<text v-for="(item,index) in hotList" :key="index" @click="searchHot(item.keyword)">{{item.keyword}}</text>
					</view>
				</div>

				<view class="search-result-title" v-if="searchType==2">搜索结果</view>

			</view>
		</view>
		<view class="box" v-if="searchType==2">
			<productList :loading="loading" :msg="msg" @loadMore="loadMore" @refresh="refresh"  @update="update" @upPrice="upPrice" :isNeedShow='true' :list="searchList" :productListHeight="productListHeight" :type="type" :packId="packId"></productList>
		</view>
		<view :style="{height:searchType==1?'760rpx':'auto'}">

		</view>
		<adv />
		<view style="height:35rpx;"></view>
		<vant-popup :show="showMore" @close="onClose"  position="right" custom-style="width: 80%;height:100%">
			<view class="popu-con">
				<view class="up-date">
					更新时间
				</view>
				<view class="select-time flex flai fljcsb">
					<input type="text" value="" v-model="searchForm.minDate" placeholder="开始时间" disabled @click="selectStartTime" />
					<text class="line"></text>
					<input type="text" value="" v-model="searchForm.maxDate" placeholder="结束时间" disabled @click="selectEndTime" />

				</view>
				<view class="bazaar">
					<view class="bazaar-title">市场</view>
					<view class="select-bazaar flex flai" @click="isShowBazaar=!isShowBazaar">
						<input type="text" v-model="selectBazaarValue" placeholder="请选择市场" class="flex1" disabled />
						<image src="../../static/img/arrow-right.png" mode=""></image>
					</view>
					<view class="bazaar-box-list" v-if="isShowBazaar">
						<view class="bazaar-list flex flai" :class="bazaaIndex==index?'bazaar-list-active':''" v-for="(item,index) in bazaaList"
						 :key="index" @click="selectBazaar(index,item.name,item.id)">
							<text class="flex line-clamp-one flex1">{{item.name}}</text>
							<image src="../../static/img/right01.png" mode="" v-if="bazaaIndex==index"></image>
							<image src="../../static/img/right02.png" mode="" v-else></image>
						</view>
					</view>
				</view>
				<view class="price-area">
					<view class="price-title">价格区间</view>
					<view class="select-time flex flai fljcsb">
						<input type="text" v-model="searchForm.minPrice" value="" placeholder="最低价" />
						<text class="line"></text>
						<input type="text" value="" v-model="searchForm.maxPrice" placeholder="最高价" />

					</view>
				</view>

			</view>
			<view class="footer-btn flex flai">
				<view @click="clearSelect">清空</view>
				<view @click="doneSelect">确定</view>
			</view>
		</vant-popup>
		<vant-popup :show="showDate" position="bottom" custom-style="width: 100%;height:40%">
			<van-datetime-picker type="date" :value="currentDate" @input="onInput" :min-date="minDate" :max-date="maxDate" @confirm="confirm"
			 @cancel="cancel" />
		</vant-popup>
	</view>
</template>
<script>
	import productList from '../components/productList/productList.vue'
	import adv from '../components/adv/adv.vue'
	import {
		timeFormate
	} from '../../uitls/index.js'
	import API from '../../api/index.js'
	export default {
		components: {
			productList,
			adv
		},
		data() {
			return {
				productListHeight: 300,
				showMore: false,
				showDate: false,
				isShowBazaar: false, //是否显示市场
				currentDate: new Date().getTime(),
			
				minDate: new Date(new Date().getFullYear()-1, '02', '01').getTime(),
				maxDate:new Date().getTime(),
				
				searchList: [],
				searchType: 2,
				bazaaList: [],
				bazaaIndex: 0,
				hotList: [],

				dateType: 1, //开始与结束时间区分
				startTime: '', //开始时间
				endTime: '', // 结束时间
				searchForm: {
					marketId: '',
					minDate: '',
					maxDate: "",
					minPrice: "",
					maxPrice: "",
					keyword: "",
					sort:'update_time',
					order:'desc',
					page:1,
					size:10
				},
				selectBazaarValue: "", // 选择市场
				type: '',
				packId: "",
				loading:false,
				msg:''
			}
		},
		onLoad(opt) {
			this.searchList = []
			console.log(opt)
			console.log(new Date().getFullYear()-1)
			if (opt.keyword && opt.keyword !== '') {
				this.searchForm.keyword = opt.keyword
				this.search()
			} else {
				this.searchType = 2
				this.gethotData()
				this.search()
			}
			if (opt.type) {
				console.log(opt)
				this.type = opt.type
				this.packId = opt.packId
			}
			this.getAllbazaaList()
			var _this = this
			uni.getSystemInfo({
				success: function(res) { // res - 各种参数
					console.log(res.windowHeight); // 屏幕的宽度 

					let info = uni.createSelectorQuery().select(".search-bg");
					info.boundingClientRect(function(data) { //data - 各种参数
						console.log(data.height) // 获取元素宽度
						_this.productListHeight = res.windowHeight - data.height

						console.log('高度')
					}).exec()

				}
			});
		},
		onPullDownRefresh() {
			this.searchForm.page = 1
			this.search()
		},
		methods: {
			gethotData() {
				API.indexHome.getIndex().then(res => {
					console.log(res)
					if (res.errno == 0) {
						this.hotList = res.data.hotKeyword
					}

				})
			},
			onClose() {
				this.showMore = false
			},
			// 清空搜索框
			clickInput() {
				console.log('点我')
				this.searchForm.keyword = ''
				this.searchList =[]
				this.searchForm.page = 1
				this.search()
			},
			update(val) {
				console.log(val)
				this.searchForm.sort = 'update_time'
				this.searchForm.order = val
				this.searchForm.page = 1
					this.searchList = []
				this.search()
			},
			upPrice(val) {
				console.log(val)
				this.searchForm.sort = 'retail_price'
				this.searchForm.order = val
				this.searchForm.page = 1
					this.searchList = []
				this.search()
			},
			searchInput () {
				this.searchForm.page = 1
				this.searchList = []
					this.search()
			},
			search() {
				console.log('开始搜索')
				API.indexHome.search(this.searchForm).then(res => {
					if (res.errno == 0) {
						console.log('进入')
						var data = res.data.items
						if (data.length==10) {
							this.msg ='上拉加载更多'
							this.loading = true
						}
					
						if (data.length>0&&data.length<10) {
							this.msg ='主人我是有底线的哟~~'
							this.loading = true
						} 
						this.searchList = [...this.searchList,...data]
						
					}
				})
			},
			loadMore() {
				this.searchForm.page = this.searchForm.page + 1
				this.search()
			},
			refresh () {
				this.searchForm.page =  1
				this.searchList = []
				this.search()
			},
				
			searchHot(name) {
				this.searchForm.keyword = name
				this.searchType = 2
				this.search()

			},
			// 获取所有市场
			getAllbazaaList() {
				API.indexHome.moreMechart().then(res => {
					console.log(res)
					if (res.errno == 0) {
						this.bazaaList = res.data
					}
				})
			},
			moreQuery() {
				this.showMore = true
			},
			onInput(event) {

				this.currentDate = event.detail

			},
			confirm(val) {
				console.log(val.detail)
				if (this.dateType == 1) {
					this.searchForm.minDate = timeFormate(val.detail, 'Y-M-D')
					console.log(this.searchForm.minDate)
					this.showDate = false
				} else {
					this.searchForm.maxDate = timeFormate(val.detail, 'Y-M-D')
					this.showDate = false
				}

				
			},
			cancel(val) {
				this.showDate = false
				this.showDateEnd = false
			},
			selectStartTime() {
				console.log('选择开始时间')
				this.showDate = true
				this.dateType = 1
			},
			selectEndTime() {
				console.log('选择开始时间')
				this.showDate = true
				this.dateType = 2
			},
			// 选择市场
			selectBazaar(index, name, id) {
				this.bazaaIndex = index
				this.isShowBazaar = false
				this.selectBazaarValue = name
				this.searchForm.marketId = id
			},
			// 清空选择
			clearSelect() {
				this.searchForm = {
					marketId: '',
					minDate: '',
					maxDate: "",
					minPrice: "",
					maxPrice: "",
					keyword: ""
				}
				this.selectBazaarValue = ''
				this.searchForm.marketId = ''
			},
			// 确定选择
			doneSelect() {
				this.showMore = false
				this.searchType = 2
				this.search()

			},
		}
	}
</script>
<style>
	@import url("./search.css");
</style>
